<script lang="ts" setup>
import { useAttrs } from "vue";
import { getSvg } from "@/utils";
import { isEmptyType } from "@/assets/js/types";
defineOptions({
  name: "Player",
  inheritAttrs: false
});
const attrs = useAttrs();
const { options = {}, ...args } = attrs as Record<string, any>;

if (typeof options !== "object" || options === null) {
  throw new Error("options 必须是一个非空对象");
}
</script>

<template>
  <!-- bg-[url(@/assets/img/demo.png)] bg-no-repeat bg-cover bg-center -->
  <div
    class="h-270 shadow-[0px_4px_8px_0px_rgba(58,90,112,0.22)] rounded-10 bg-[rgba(255,255,255,1)]"
    v-bind="args"
  >
    <div class="h-220 rounded-[10px_10px_0_0] center color-[#f00]">
      <Video v-if="!isEmptyType(options)" v-bind="options" />
    </div>
    <div
      class="h-50 lh-50 bg-[#0D224D] rounded-[0_0_10px_10px] px-20 flex justify-between items-center"
    >
      <span class="font-500 text-14 color-[#fff] lh-16 text-left not-italic"
        >คลิกเพื่อดูวิดีโอผลการออกรางวัลทั้งหมด</span
      >
      <img class="w-7 h-13 aspect-ratio-[7/13]" :src="getSvg('Frame_597')" />
    </div>
  </div>
</template>
